<template>
  <div id="contentBox">
    <div class="searchBox">
      <el-form :inline="true" ref="searchForm" :model="searchForm" label-width="96px">
        <el-form-item label="添加时间起" prop="startDate">
          <el-date-picker :editable="false" v-model="searchForm.startDate" type="date" placeholder="选择日期" :picker-options="startDateOpt"
            @change="debounceSeach">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="添加时间止" prop="endDate">
          <el-date-picker :editable="false" v-model="searchForm.endDate" type="date" placeholder="选择日期" :picker-options="endDateOpt"
            @change="debounceSeach">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="上游名称" prop="name">
          <el-input v-model="searchForm.name" placeholder="请输入搜索内容..." @input.native="debounceSeach"></el-input>
        </el-form-item>
        <el-form-item label="主营品牌" prop="brandName">
          <el-select v-model="searchForm.brandName" placeholder="请输入搜索内容..."   v-on:change="debounceSeach()">
            <el-option label="请选择状态" value=""> </el-option>
            <el-option v-for="(item,index) in dealerArray" :label="item.name" :value="item.name" :key="index">
            </el-option>
          </el-select>
        </el-form-item>

          <el-form-item label="省份" prop="province">
          <el-select v-model="searchForm.province" filterable placeholder="请选择省份"  v-on:change="debounceSeachMap()">
            <el-option label="请选择省份" value=""> </el-option>
            <el-option v-for="(item,index) in provinceData" :label="item.name" :value="item.id" :key="index">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市级" prop="city">
          <el-select v-model="searchForm.city" filterable placeholder="请选择市级"  v-on:change="debounceSeach()">
            <el-option label="请选择市级" value=""> </el-option>
            <el-option v-for="(item,index) in cityData" :label="item.name" :value="item.id" :key="index">
            </el-option>
          </el-select>
        </el-form-item>
        

        <el-form-item label="添加人" prop="createName">
          <el-input v-model="searchForm.createName" placeholder="请输入搜索内容..." @input.native="debounceSeach">
          </el-input>
        </el-form-item>

         <el-form-item label="上游类别" prop="type">
          <el-select v-model="searchForm.type" placeholder="请选择类别"  v-on:change="debounceSeach()">
            <el-option label="请选择类别" value=""> </el-option>
            <el-option v-for="(item,index) in upTypeMap" :label="item" :value="index" :key="index">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-select v-model.number="searchForm.status" placeholder="请选择状态" v-on:change="debounceSeach()">
            <el-option label="请选择状态" value=""> </el-option>
            <el-option v-for="(item,index) in selectCode" :key="index" :label="index" :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="margin-bottom: 10px;">
          <el-button @click="resetSearchForm('searchForm')">重置</el-button>
          <el-button @click="exportExcels(searchForm,'up_supplier/export','上游管理')">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="tableBox" style="margin:0 25px;">
      <el-table :data="tableData.data" border id='table'>
        <el-table-column label="编号" :min-width="100" fixed='left'>
          <template scope="scope">
            <span>{{ scope.row.number  }}</span>
          </template>
        </el-table-column>
        <el-table-column label="上游名称" :min-width="120">
          <template scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="上游类别" :min-width="100">
          <template scope="scope">
            <span>{{ scope.row.typeString  }}</span>
          </template>
        </el-table-column>
        <el-table-column label="主营品牌" :min-width="200">
          <template scope="scope">
            <span>{{ scope.row.brandName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="地址（省-市）" :min-width="120">
          <template scope="scope">
            <span>{{ scope.row.province +"/"+ scope.row.city}}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="120">
          <template scope="scope">
            <span>{{ scope.row.status?"启用":"停用" }}</span>
          </template>
        </el-table-column>

        <el-table-column label=" 添加时间" :min-width="150">
          <template scope="scope">
            <span>{{ getDate(scope.row.createTime ) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" :min-width="220" fixed='right'>
          <template scope="scope">
            <el-button style="margin-left:0;" @click="toggleEdit(false,'edit',scope.row.id)" size="small">编辑</el-button>
            <el-button style="margin-left:0;" @click="toggleEdit(true,'look',scope.row.id)" size="small">查看</el-button>
           <el-button size="small" :type="toggle_button_types(scope.row.enable)" @click="handleDisabled(scope.$index, scope.row)" :ref="'flag'+scope.$index" >{{scope.row.status|flagBoolF(scope.row.status) }}</el-button>
            <el-button style="margin-left:0;" @click="ContactsTable(true,'edit',scope.row.id)" size="small">联系人管理</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="text-align: center;margin-top: 15px;position:relative;">
        <el-button style="position: absolute;right: 25px;top: 0px;" type="primary" @click="toggleEdit(false,'add',0)" size="small">添加供应商</el-button>
      </div>
      <el-dialog title="上游管理" v-if="dialogSendData.isCode" :visible.sync="dialogSendData.isCode" :lock-scroll='true' top=5% :close-on-click-modal="false">
        <Edit @Refresh="seachData()" :upTypeMap="upTypeMap" :dialogSendData="dialogSendData"></Edit>
      </el-dialog>
       <el-dialog title="联系人管理列表" v-if="contactsData.isCode" :visible.sync="contactsData.isCode" :lock-scroll='true' top=5% :close-on-click-modal="false">
        <ContactsTable @Refresh="seachData()" :contactsData="contactsData" :contactsManageData="contactsManageData"></ContactsTable>
      </el-dialog>
      <el-dialog title="联系人管理" v-if="contactsManageData.isCode" :visible.sync="contactsManageData.isCode" :lock-scroll='true' top=5% :close-on-click-modal="false">
        <ContactsManage @Refresh="seachData()" :contactsData="contactsData" :contactsManageData="contactsManageData"></ContactsManage>
      </el-dialog>
      

    </div>
    <div class="block" style="text-align: center;margin-top: 40px;position:relative;">
      <pagination v-on:refreshSeachData="seachData" :tableData="tableData" :searchForm="searchForm"></pagination>
    </div>
  </div>
</template>
<script src="./index.js">
</script>


<style lang="scss" scoped>
.el-popover,.el-popovers{
  height:800px !important ;
  overflow:scroll !important;
}
</style>
